<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Markdown Previewr</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            background: #000;
        }

        .markdown-wrap {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            color: #fff;
            display: flex;
            flex: 1;
        }
        .markdown-wrap .panel {
            box-sizing: border-box;
        }
        .markdown-wrap .panel.left, .markdown-wrap .panel.right {
            height: 100%;
            width: 50%;
        }
        .markdown-wrap .panel.right {
            border-left: 1px solid #fff;
        }
        .markdown-wrap .panel .header {
            border-bottom: 1px solid #fff;
            padding: 10px 40px;
            background: #000;
            position: relative;
            z-index: 999;
        }
        .markdown-wrap .panel .header h3 {
            margin: 0;
            padding: 0;
        }
        .markdown-wrap .panel .content {
            position: absolute;
            top: 0;
            bottom: 0;
            padding-top: 47px;
            width: 49%;
            overflow: auto;
        }
        .markdown-wrap .panel .content .source-editor {
            width: 99%;
            height: 99%;
            padding: 0;
            margin: 0;
            border: none;
            overflow: hidden;
            resize: none;
            background: #000;
            color: #fff;
            padding: 20px;
            box-sizing: border-box;
            outline: none;
            font-size: 14px;
        }
        .markdown-wrap .panel .content .preview-editor {
            font-size: 14px;
            padding: 20px;
        }
        .markdown-wrap #preview {
            padding: 20px;
        }

    </style>
</head>
<body>
<div id="app"></div>
</body>
</html>
<script>

    const projectName = "markdown-previewer";
    localStorage.setItem("example_project", "Markdown Previewer");

    marked.setOptions({
        breaks: true
    });

    const renderer = new marked.Renderer();
    renderer.link = function(href, title, text) {
        return `<a target="_blank" href="${href}">${text}` + "</a>";
    };

    const Preview = props => {
        return (
            <div
                id="preview"
                dangerouslySetInnerHTML={{
                    __html: marked(props.markdown, { renderer: renderer })
                }}
            />
        );
    };

    const placeholder = `# Welcome to my React Markdown Previewer!

## This is a sub-heading...
### And here's some other cool stuff:

Heres some code, \`<div></div>\`, between 2 backticks.

\`\`\`
// this is multi-line code:

function anotherExample(firstLine, lastLine) {
  if (firstLine == '\`\`\`' && lastLine == '\`\`\`') {
    return multiLineCode;
  }
}
\`\`\`

You can also make text **bold**... whoa!
Or _italic_.
Or... wait for it... **_both!_**
And feel free to go crazy ~~crossing stuff out~~.

There's also [links](https://www.freecodecamp.com), and
> Block Quotes!

And if you want to get really crazy, even tables:

Wild Header | Crazy Header | Another Header?
------------ | ------------- | -------------
Your content can | be here, and it | can be here....
And here. | Okay. | I think we get it.

- And of course there are lists.
  - Some are bulleted.
     - With different indentation levels.
        - That look like this.


1. And there are numbererd lists too.
1. Use just 1s if you want!
1. But the list goes on...
- Even if you use dashes or asterisks.
* And last but not least, let's not forget embedded images:

![React Logo w/ Text](https://goo.gl/Umyytc)
`;


    class App extends React.Component {
        constructor() {
            super();
            this.state = {
                input: placeholder
            };
            this.textOnChange = this.textOnChange.bind(this);
        }
        textOnChange(e){
            const {value} = e.target;
            this.setState({input:value})
        }
        render() {
            return (
                <div className="markdown-wrap">
                    <div className="panel left">
                        <div className="header">
                            <h3>Editor</h3>
                        </div>
                        <div className="content">
                            <textarea id="editor" className="source-editor" value={this.state.input} onChange={this.textOnChange}/>
                        </div>
                    </div>
                    <div className="panel right">
                        <div className="header">
                            <h3>Previewer</h3>
                        </div>
                        <div className="content">
                            <Preview markdown={this.state.input}/>
                        </div>
                    </div>
                </div>
            );
        }
    }
    ReactDOM.render(<App />, document.getElementById("app"));

</script>